<template>
  <div>
    <div>
      <el-button @click="handleAddBanner" class="adds">新增banner</el-button>
    </div>
    <el-table
      ref="bannerAddRef"
      :data="result.banners"
      style="width: 95%; border-radius: 10px; margin-top: 10px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column label="Banner编号">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="Banner名称">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="Banner图">
        <template slot-scope="scope">
          <img
            :src="scope.row.icon"
            style="width: 40px; height: 30px; object-fit: cover"
            @error="handleImageError"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 1">
            <el-button type="warning" plain size="mini">启用</el-button>
          </template>
          <template v-else>
            <el-button type="warning" plain size="mini">关闭</el-button>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditBanner(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteBanner(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="result.totalSize"
      >
      </el-pagination>
    </div>

    <!-- 用户新增 -->
    <BannerAddEidt
      ref="bannerAddRef"
      @closeAddDialog="closeAddDialog"
      :addVisible="addVisible"
      :title="title"
    ></BannerAddEidt>
  </div>
</template>
      
<script>
//,addBannerApi,editBannerApi,delBannerApi,bannerInfoByIdApi,
import { BannerPageApi, delBannerApi } from "@/Api/BannerApi";
// import delay from "@/utils/delay";
import BannerAddEidt from "@/components/banner/BannerAddEidt.vue";

export default {
  data() {
    return {
      //分页信息
      page: {
        pageNo: 1,
        pageSize: 5,
      },
      //banner数组
      result: {
        banners: [],
        totalPage: 1,
        totalSize: 0,
      },

      //用户数组
      loading: false,
      addVisible: false,
      //新增修改标题
      title: "",
    };
  },
  components: {
    BannerAddEidt,
  },
  mounted() {
    this.loadBanners();
  },
  methods: {
    //分页优化
    async loadBanners() {
      try {
        const { data } = await BannerPageApi(this.page);
        this.result = {
          banners: data.records,
          totalSize: data.total,
          totalPage: data.pages,
        };
      } catch (error) {
        this.$message.error("数据加载失败");
      }
    },
    //加载菜单信息
    // async loadBanners() {
    //   try {
    //     const res = await BannerPageApi(this.page);

    //     if (res.status == 200) {
    //       console.log(res.data);
    //       this.result.banners = res.data.records;
    //       this.result.totalPage = res.data.pages;
    //       this.result.totalSize = res.data.total;
    //     } else {
    //       this.$message({
    //         message: res.msg,
    //         type: "error",
    //         duration: 1000,
    //       });
    //     }
    //   } catch (error) {
    //     console.log(error);
    //     this.$message({
    //       message: "系统异常",
    //       type: "error",
    //       duration: 1000,
    //     });
    //   }
    // },
    //新增
    handleAddBanner() {
      this.addVisible = true;
      this.title = "新增Banner";

      this.$refs.bannerAddRef.openDialog();
    },
    //修改
    handleEditBanner(index, row) {
      this.addVisible = true;
      this.title = "修改Banner"; // 修正标题
      this.$refs.bannerAddRef.openDialog(row.id);
    },
    //删除
    async handleDeleteBanner(index, row) {
      this.$confirm(`是否要删除用户${row.title}?`, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await delBannerApi(row.id);

            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
                duration: 1000,
                onClose: () => {
                  this.page.pageNo = 1;
                  this.loadBanners();
                },
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
                duration: 1000,
              });
            }
          } catch (error) {
            console.log(error);
            this.$message({
              message: "系统异常",
              type: "error",
              duration: 1000,
            });
          }

          //
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //删除
    // async handleDeleteBanner(index, row) {
    //   this.$confirm(`是否要删除Banner「${row.title}」?`, "删除", {

    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(async () => {
    //       try {
    //         const res = await delBannerApi(row.id);

    //         if (res.status == 200) {
    //           this.$message({
    //             type: "success",
    //             message: "删除成功!",
    //             duration: 1000,
    //             onClose: () => {
    //               this.loadBanners();
    //             },
    //           });
    //         } else {
    //           this.$message({
    //             message: res.msg,
    //             type: "error",
    //             duration: 1000,
    //           });
    //         }
    //       } catch (error) {
    //         console.log(error);
    //         this.$message({
    //           message: "系统异常",
    //           type: "error",
    //           duration: 1000,
    //         });
    //       }

    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    //关闭新增窗口
    closeAddDialog(isReflash = false) {
      this.addVisible = false;
      isReflash && this.loadBanners();
    },
    // 新增图片加载失败处理
    handleImageError(event) {
      event.target.style.display = "none"; // 隐藏损坏图片
      // 或者设置默认图片：event.target.src = '默认图片路径';
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.loadBanners();
    },
    handleCurrentChange(pageNo) {
      this.page.pageNo = pageNo;
      this.loadBanners();
    },
  },
};
</script>
      
<style lang="less" scoped>
.page {
  width: 600px;
  height: 30px;
  margin: 10px auto;
}
.adds {
  margin-top: 10px;
  width: 100px;
  border-radius: 6px;
}
</style>